<template>
  <div class="bg">
    <!-- <h1>我的订单页</h1> -->
    <div>
      <van-nav-bar
        title="我的订单"
        left-across
        right-text="退货/评价说明"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" />
        </template>
      </van-nav-bar>
      <!-- 点击全部,待付款,代发货,待评价,退还/售后事件 -->
      <van-tabs v-model="activeName" @click="change">
        <van-tab v-for="(item,index) in nameItem" :key="index" :title="item.title"></van-tab>
      </van-tabs>
    </div>
    <!-- 数据展示订单详情 -->
    <div v-for="(item,index) in arrDes" :key="index">
      <van-card
        :num="item.product.stars"
        :price="item.product.price"
        :title="item.product.name"
        :desc="item.product.model"
        :thumb="item.productDetail.bannerPic"
      >
        <template #tags>
          <van-tag plain type="default" color="gery">{{item.product.spec}}</van-tag>
          <van-tag plain type="default" color="gery">{{item.product.productNum}}枚装</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" plain type="info">再次购买</van-button>
        </template>
      </van-card>
    </div>
    <!-- 空状态,有数据的时候消失 -->
    <div>
      <van-empty description="描述文字" v-show="des" />
    </div>
    <!-- 空状态 -->
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      activeName: this.$route.query.id + 1,
      des: true,
      arrDes: [],
      nameItem: [
        { title: '全部', id: 1 },
        { title: '待付款', id: 2 },
        { title: '待收货', id: 3 },
        { title: '待发货', id: 4 },
        { title: '待评价', id: 5 }
      ]
    };
  },
  mounted() {
    // console.log(this.active);
    // console.log(this.$route.query.items);
    this.des = false;
    axios
      .post(
        '/api/Order/Select',
        {},
        {
          params: {
            name: '全部',
            userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
          }
        }
      )
      .then(res => {
        this.arrDes = res.data.data;
        console.log(res);
      });
  },
  methods: {
    //变换选择,传入id
    change(name, title) {
      console.log(title);
      console.log('123', title);
      //点击获取数据带参
      axios
        .post(
          '/api/Order/Select',
          {},
          {
            params: {
              name: title,
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135'
            }
          }
        )
        .then(res => {
          if (res.data.data.length === 0) {
            this.arrDes = res.data.data;
            this.des = true;
            console.log(res.data);
          } else {
            this.arrDes = res.data.data;
            this.des = false;
            console.log(res);
            console.log(res.data.data);
          }
        });
    },
    onClickLeft() {
      // alert(123);
      //  跳转--底部:我的页面
      this.$router.push({
        name: '我的'
      });
    },
    onClickRight() {
      //点击退货,触发路由跳转
      this.$router.push({
        name: '退货'
      });
    }
  }
};
</script>
<style scoped>
.list {
  display: flex;
  margin: 1rem;
  border-bottom: 1px gray solid;
  justify-content: space-evenly;
  align-items: center;
}
.list div {
  font-size: 1.7rem;
}
</style>